<template>
  <div>
    <h2>插槽基本用法</h2>
    <hr/>
    <my-child-name>
      <!-- 组件标签之间的内容 -->
      <template v-slot:header>
        <h1>这里是header中的内容</h1>
      </template>
      <div>中间默认插槽</div>
      <template v-slot:footer>
        <h1>这里是footer中的内容</h1>
      </template>
    </my-child-name>
    <my-child-scope>
      <template v-slot:default>
        {{info}}
      </template>
    </my-child-scope>
    <!-- 如果只有一个插槽可以进行如下简化 -->
    <!-- <my-child-scope v-slot:default>
        {{info}}
    </my-child-scope> -->
    <my-child-scope v-slot:default='slotProps'>
        {{slotProps.user.lastName}}
    </my-child-scope>
    <my-child-scope v-slot='slotProps'>
        {{slotProps.user.lastName}}
    </my-child-scope>
  </div>
</template>

<script>
// 导入子组件
// 父组件的模板中用到了子组件
// import MyChild from '@/test/slot/MyChild.vue'
// import MyChildName from '@/test/slot/MyChildName.vue'
import MyChildScope from '@/test/slot/MyChildScope.vue'
export default {
  data () {
    return {
      info: 'lilei'
    }
  },
  components: {
    // MyChild
    // MyChildName
    MyChildScope
  }
}
</script>
